<template>
  <div class="industry-report">
    <div class="back" @click="backHome">首页</div>

    <div class="search-box">
      <ComSearchInput @search="search" />
    </div>

    <div class="search-filter">
      <ComFilter class="mb-[20px]" title="报告标签" :list="bqList" @select="selectItem" />
    </div>

    <div class="industry-main" v-loading="loading">
      <el-scrollbar>
        <IndustryData ref="industryRef" @finish="loading = false" />
      </el-scrollbar>
    </div>
    <div class="release-btn">
      <div class="release-type">
        <p @click="toAdd('N')">PDF上传</p>
        <p @click="toAdd('Y')">发表原创</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRouter} from "vue-router";
import ComSearchInput from "../../components/comSearchInput/index.vue"
import ComFilter from '../../components/comFilter/index.vue'
import IndustryData from './data.vue'
import {reportLabelsList} from "@/api/reportLabels";

const router = useRouter();
const loading = ref(true);
const bqList = ref<Record<string, any>[]>([]);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const industryRef = ref<any>();
const reportLabels = ref('');
const reportTitle = ref('');

function backHome() {
  router.push('pageHome')
}

function search(val: string) {
  reportTitle.value = val;
  getList();
}

function selectItem(val: string[]) {
  const ids = bqList.value.filter((item) => val.includes(item.id)).map((item) => item.id) || [];
  reportLabels.value = ids.join(',');
  getList();
}

function getList() {
  loading.value = true;
  industryRef.value?.getData({reportLabels: reportLabels.value, reportTitle: reportTitle.value});
}

function toAdd(isOriginal: string) {
  router.push({name: 'industryDetail', query: {isOriginal}})
}

function getData() {
  reportLabelsList({}).then((res) => {
    bqList.value = res.rows || []
  })
}

getData()

defineComponent({name: 'IndustryReportIndex'})
</script>

<style scoped lang="scss">
.industry-report {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 80px;

  .back {
    position: relative;
    margin-top: 20px;
    padding-left: 40px;
    color: #FF4350;
    cursor: pointer;

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 10px;
      width: 20px;
      height: 12px;
      background: url('../../assets/arrow.png') no-repeat center;
      transform: translateY(-50%) scaleX(-1);
    }
  }

  .search-box {
    margin: 36px 0 20px 0;
    padding: 0 85px 0 55px;
  }

  .search-filter {
    padding: 20px;
    background-color: #fff;
  }

  .industry-main {
    position: relative;
    width: 100%;
    height: calc(100% - 280px);
    margin-top: 20px;
  }

  .release-btn {
    position: fixed;
    right: 100px;
    bottom: 100px;
    width: 92px;
    height: 92px;
    background: url('./assets/release.png') no-repeat center;
    cursor: pointer;

    &:hover .release-type {
      display: flex;
    }

    .release-type {
      position: absolute;
      left: -170px;
      width: 176px;
      height: 104px;
      padding: 20px 30px;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      background: #fff;

      p {
        position: relative;
        padding-left: 30px;

        &:before {
          content: '';
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }

        &:first-child:before {
          background: url('./assets/pdf.png') no-repeat center;
        }

        &:nth-child(2):before {
          background: url('./assets/fbyc.png') no-repeat center;
        }
      }
    }
  }
}
</style>
